<template>
  <div>
    <TableSelect
      ref="tableSelect"
      v-model="select"
      placeholder="Test......."
      showKey="processFlowId"
      :data="selectTableData"
      :columns="columns"
      filterKey="startBank"
      rowFieldKey="processFlowId"
      :loading="loading"
      :scroll-y="scrollY"
      @change="selectChange"
      @clear="clear"
    />
    <el-button @click="handleSelectFocus">聚焦</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import TableSelect from "@/components/TableSelect/index.vue";
import type { Column } from "@/components/TableSelect/types";
import { VxeTablePropTypes } from "vxe-table";

defineOptions({
  name: "DemoTableSelect"
});

const loading = ref(false);

const select = ref({
  processFlowId: 10002,
  processType: "Test2",
  manufacyuringLayer: "Test",
  startBank: "Women",
  endBank: 22,
  processOwner: "Guangzhou"
});
interface IRow {
  processFlowId: number;
  processType: string;
  manufacyuringLayer: string;
  startBank: string;
  endBank: number;
  processOwner: string;
}

const selectTableData = ref<IRow[]>([
  {
    processFlowId: 10001,
    processType: "Test1",
    manufacyuringLayer: "Develop",
    startBank: "Man",
    endBank: 28,
    processOwner: "test abc"
  },
  {
    processFlowId: 10002,
    processType: "Test2",
    manufacyuringLayer: "Test",
    startBank: "Women",
    endBank: 22,
    processOwner: "Guangzhou"
  },
  {
    processFlowId: 10003,
    processType: "Test3",
    manufacyuringLayer: "PM",
    startBank: "Man",
    endBank: 32,
    processOwner: "Shanghai"
  },
  {
    processFlowId: 10004,
    processType: "Test4",
    manufacyuringLayer: "Designer",
    startBank: "Women",
    endBank: 24,
    processOwner: "Shanghai"
  },
  {
    processFlowId: 10005,
    processType: "Test4",
    manufacyuringLayer: "Designer",
    startBank: "Women",
    endBank: 24,
    processOwner: "Shanghai"
  },
  {
    processFlowId: 10006,
    processType: "Test4",
    manufacyuringLayer: "Designer",
    startBank: "Women",
    endBank: 24,
    processOwner: "Shanghai"
  }
]);
const columns: Column[] = [
  {
    title: "Process Flow ID",
    field: "processFlowId",
    width: 125
  },
  {
    title: "Process Type",
    field: "processType",
    width: 110
  },
  {
    title: "Manufacyuring Layer",
    field: "manufacyuringLayer",
    width: 160
  },
  {
    title: "Start Bank",
    field: "startBank",
    width: 90
  },
  {
    title: "End Bank",
    field: "endBank",
    width: 90
  },
  {
    title: "Process Owner",
    field: "processOwner",
    width: 125
  }
];
const tableSelect = ref();

const handleSelectFocus = () => {
  tableSelect.value.focus();
};

const selectChange = (v: IRow) => {
  console.log(v);
};

const clear = () => {
  console.log("do Search...");
};

const scrollY: VxeTablePropTypes.ScrollY = {
  enabled: true
};
</script>

<style lang="scss" scoped></style>
